<template>
	<div>
		<use-table ref="tbl" :tableRefs="$refs.etbl"></use-table>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">用户名称：</div>
					<el-input v-model="req.member_name" placeholder="请输入" class="search_input" @change="search"
						clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">状态：</div>
					<el-select v-model="req.state" class="search_input" @change="search" clearable>
						<el-option v-for="item in stateOptions" :key="item.value" :label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">评价时间：</div>
					<el-date-picker v-model="searchTime" type="daterange" align="right" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
						:picker-options="pickerTimeOptions" class="search_start_end_time" @change="search">
					</el-date-picker>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40"
					@click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch"
					v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">
					常用筛选</div>
			</div>
		</div>
		<div class="container last_container use-table">
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row
				@sort-change="sortable">
				<el-table-column label="用户" align="center" width="190">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<el-image class="headimg_small"
								:src="scope.row.member_headimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
								:preview-src-list="scope.row.previewImgs" fit="contain"></el-image>
							<div class="margin_l_5 ellipsis_2 left_just">{{ scope.row.member_name }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="商品" align="center" width="330">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<use-carousel :width="84" :height="84" :imgs="scope.row.goods_id[0].imgs"
								:video="scope.row.goods_id[0].video"></use-carousel>
							<div class="left_just margin_l_10">
								<el-popover popper-class="use_popover" :open-delay="200" :close-delay="40"
									placement="right" :title="scope.row.goods_id[0].name" trigger="hover"
									:content="scope.row.goods_id[0].name_pw || '--'">
									<div slot="reference" class="dflex_d_c">
										<div class="ellipsis crpr">{{ scope.row.goods_id[0].name }}</div>
										<div class="ellipsis crpr">{{ scope.row.goods_id[0].name_pw || '--' }}</div>
									</div>
								</el-popover>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="商品评分" align="center" width="200">
					<template slot-scope="scope">
						<el-rate v-model="scope.row.review_cnt" :colors="colors" disabled></el-rate>
					</template>
				</el-table-column>
				<el-table-column label="评价内容" align="center" width="260">
					<template slot-scope="scope">
						<el-popover popper-class="use_popover" :open-delay="200" :close-delay="40" placement="left"
							trigger="hover">
							<div>
								<div><span class="bbb">评论：</span>{{ scope.row.review_content }}</div>
								<div class="margin_t_10"><span
										class="bbb">回复：</span>{{ scope.row.replay_content || '--' }}</div>
							</div>
							<div slot="reference" class="dflex_d_c left_just">
								<div class="ellipsis crpr"><span class="bbb">评论：</span>{{ scope.row.review_content }}
								</div>
								<div class="ellipsis crpr"><span
										class="bbb">回复：</span>{{ scope.row.replay_content || '--' }}</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="评价图片" align="center" width="350">
					<template slot-scope="scope">
						<div class="dflex_vertical_c owao" style="height: 110px;">
							<div class="margin_r_10" v-for="(item, i) in scope.row.review_imgs" :key="i">
								<el-image style="width: 80px; height: 80px;border-radius: 10px;overflow: hidden;"
									:preview-src-list="scope.row.review_imgs" :src="item" fit="cover"></el-image>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="100">
					<template slot-scope="scope">
						<el-tooltip :open-delay="350" :content="scope.row.state == '显示' ? '隐藏' : '显示'" placement="top"
							:hide-after="1000" :enterable="false" effect="light">
							<el-switch v-model="scope.row.state" active-color="#ff6a6c" inactive-color="#bbb"
								active-value="显示" inactive-value="隐藏" @change="stateChange(scope.row)"></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column property="create_time" sortable="custom" label="评价时间" align="center" width="180">
				</el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="100">
					<template slot-scope="scope">
						<div v-if="!scope.row.replay_content">
							<el-tooltip :open-delay="350" content="回复" placement="top" :hide-after="1000"
								:enterable="false" effect="light">
								<el-button circle size="medium" icon="el-icon-chat-dot-round" class="table-btn"
									@click="reply(scope.row._id)"></el-button>
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
		</div>
		<el-drawer title="回复内容" size="500px" :visible.sync="replyDrawer" direction="rtl" :append-to-body="true"
			:wrapperClosable="false" @open="drawerOpen">
			<el-form class="add_edit" :model="form" :rules="rules" ref="ruleForm" label-width="100px">
				<el-form-item label="回复内容" prop="reply" ref="reply">
					<el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.reply" placeholder="请输入回复内容">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button :loading="replyLoading" round icon="el-icon-check" class="confirm-btn"
						@click="submitForm('ruleForm')">提交</el-button>
					<el-button round icon="el-icon-back" class="return-btn" @click="replyDrawer = false">返回</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>

<script>
	const __name = 'wmzmall-goods-comment, wmzmall-goods';
	export default {
		data() {
			return {
				advancedSearch: false,
				searchTime: [],
				stateOptions: [{
						value: '',
						label: '全部'
					},
					{
						value: '显示',
						label: '显示'
					},
					{
						value: '隐藏',
						label: '隐藏'
					}
				],
				req: {
					page: 1,
					rows: 10,
					orderby: 'create_time desc',
					member_name: '',
					state: '',
					begin_time: '',
					end_time: ''
				},
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				replyDrawer: false,
				replyId: '',
				replyLoading: false,
				form: {
					reply: ''
				},
				rules: {
					reply: [{
						required: true,
						message: '请输入回复内容',
						trigger: 'change'
					}]
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				pickerTimeOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit('pick', [start, end]);
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit('pick', [start, end]);
							}
						}
					]
				},
				searchBtnLoading: false
			};
		},
		methods: {
			async loadData(callback) {
				this.tableLoading = true;

				this.req.begin_time = '';
				this.req.end_time = '';

				if (this.searchTime && this.searchTime.length > 0) {
					this.req.begin_time = this.searchTime[0].getTime();
					this.req.end_time = this.searchTime[1].getTime() + (60 * 60 * 24 - 1) * 1000;
				}

				await this.$db[__name]
					.whereif(this.req.member_name, {
						member_name: new RegExp(this.$api.filterRegexpKey(this.req.member_name), 'i')
					})
					.whereif(this.req.state, {
						state: this.req.state
					})
					.whereif(this.searchTime && this.searchTime.length > 0, {
						create_time: this.$db.$cmd.gte(this.req.begin_time).and(this.$db.$cmd.lte(this.req
							.end_time))
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							res.datas.rows.forEach((row, idx) => {
								row.previewImgs = [(row.member_headimg && row.member_headimg.replace(
										"/132", "/0")) ||
									'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
								];
								row.create_time = new Date(row.create_time).format();
							});

							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;

							if (typeof callback === 'function') {
								callback();
							}
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path,
					data: this.req
				});
			},
			sortable(column) {
				if (column.order) {
					column.order = column.order.replace('ending', '');
				}
				this.req.orderby = column.prop + ' ' + (column.order || 'desc');

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			reply(id) {
				this.replyDrawer = true;
				this.replyId = id;
			},
			drawerOpen() {
				if (this.$refs.ruleForm) {
					this.$refs.ruleForm.clearValidate();
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid, obj) => {
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						this.replyLoading = true;
						this.$db['wmzmall-goods-comment'].update(this.replyId, {
							replay_content: this.form.reply
						}).then(res => {
							if (res.code == 200) {
								this.replyDrawer = false;
								this.loadData();
							}
							this.replyLoading = false;
						}).catch(() => {
							this.replyLoading = false;
						})
					}
				});
			},
			stateChange(row) {
				this.$db['wmzmall-goods-comment'].update(row._id, {
					state: row.state
				}).then(res => {
					if (res.code == 200) {
						this.loadData();
					}
				});
			},
			sizeChange(size) {
				this.$api.storagePaginationRows(size, this.$route.path);
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.req.rows = size;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path);
				this.req.page = current;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			}
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path);
			if (__search) {
				this.req = __search;
				if (this.req.state) {
					this.advancedSearch = true;
				}
				if (this.req.begin_time && this.req.end_time) {
					this.searchTime.push(new Date(this.req.begin_time), new Date(this.req.end_time));
					this.advancedSearch = true;
				}
			}

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;

			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style>
	.add_edit .el-textarea {
		width: 90%;
	}

	.ellipsis_2 {
		max-width: 100px;
	}
</style>
